<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-06-29 19:26:39
 * @FilePath: /src/views/service/application/components/ApplicationEditPublishDialog.vue
 * @LastEditTime: 2021-07-27 16:48:41
 * @LastEditors: luojiajun
-->
<template>
    <el-dialog 
        title="发布" 
        :visible.sync="dialogVisible" 
        :close-on-click-modal="false" 
        :close-on-press-escape="false" 
        :show-close="false" 
        class="appliction-publish-dialog" 
        width="600px"
        >
        <div class="appliction-publish-header">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px">
                
                <el-form-item label="发布类型" prop="publishType">
                    <el-select v-model="ruleForm.publishType" placeholder="请选择发布类型" @change="onChangeType">
                        <el-option v-for="item in publishType" :label="item.label" :value="item.value" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布分类" prop="groupId">
                    <el-select v-model="ruleForm.groupId" placeholder="请选择发布分类">
                        <el-option v-for="item in groupList" :label="item.groupName" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-show="ruleForm.publishType == 1" label="API服务名称" prop="apiName">
                    <el-input type="text" v-model="ruleForm.apiName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-show="ruleForm.publishType == 2" label="API服务名称" prop="apiVersionId">
                    <el-select v-model="ruleForm.apiVersionId" placeholder="请选择API服务名称" @change="onChangeApiService">
                        <el-option v-for="item in apiV1List" :label="item.apiName" :value="item.apiVersionId" :key="item.apiVersionId"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 暂时不显示 -->
                <!-- <el-form-item label="发布版本号" prop="version">
                    <el-input type="text" v-model="ruleForm.version" autocomplete="off"></el-input>
                </el-form-item> -->
            </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" :disabled="loading" :loading="loading">发 布</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { publishInterface, getInterfaceV1List } from "@/api/dataService/application"
import { getApiCategories } from "@/api/dataManagement/system/group"

export default {
    name: "ApplicationEditPublishDialog",
    model: {
        prop: "visible",
        event: "change"
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        let validateApiVersion = (rule, value, callback) => {
            if (this.ruleForm.publishType == 2 && value === '') {
                callback(new Error('请选择API名称'));
            } else {
                callback();
            }
        };
        return {
            loading: false,
            ruleForm: {
                apiBaseInfoId: '',
                apiName: '',
                apiVersionId: '',
                groupId: '',
                publishType: 1
            },
            rules: {
                apiName: [
                    { required: true, message: '请输入API名称', trigger: 'blur' },
                ],
                apiVersionId: [
                    // { required: true, message: '请选择API名称', trigger: 'blur' },
                    { validator: validateApiVersion, trigger: 'blur' }
                ],
                groupId: [
                    { required: true, message: '请选择发布分类', trigger: 'blur' },
                ],
                publishType: [
                    { required: true, message: '请选择发布类型', trigger: 'blur' },
                ],
            },
            publishType: [
                { label: '新增', value: 1 },
                { label: '更新', value: 2 },
            ],
            groupList: [],
            apiV1List: []
        };
    },
    watch: {
        dialogVisible(visible) {
            if (visible) {
                this.getApiCategories()
                this.getInterfaceV1List()
            }
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(newValue) {
                this.$emit("change", newValue);
            }
        },
        mergerRuleForm() {
            return Object.assign({}, this.ruleForm, this.form)
        },
    },
    methods: {
        clearValidate() {
            this.$refs.ruleForm.clearValidate();
        },
        resetForm() {
            this.$refs.ruleForm.resetFields()
            this.dialogVisible = false
        },
        // 获取分组列表
        getApiCategories() {
            getApiCategories().then(res => {
                if (res.code === 200) {
                    this.groupList = res.rows
                }
            })
        },
        getInterfaceV1List() {
            getInterfaceV1List().then(res => {
                if (res.code === 200) {
                    this.apiV1List = res.data
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.publishInterface()
                }
            });
        },
        publishInterface() {
            if (this.loading) return

            this.loading = true

            if (this.mergerRuleForm.publishType == 2) {
                let obj = this.apiV1List.find(item => item.apiVersionId == this.mergerRuleForm.apiVersionId)
                if (obj) {
                    this.mergerRuleForm.apiName = obj.apiName
                }
            } else {
                this.mergerRuleForm.apiName = this.ruleForm.apiName
            }

            let params = {
                apiBaseInfoId: this.mergerRuleForm.apiBaseInfoId,
                apiName: this.mergerRuleForm.apiName,
                apiVersionId: this.mergerRuleForm.publishType == 1 ? '' : this.mergerRuleForm.apiVersionId, // 如果是更新，需要传更新哪个版本的接口ID
                groupId: this.mergerRuleForm.groupId,
                publishType: this.mergerRuleForm.publishType
            }

            publishInterface(params).then(res => {
                this.onClose()
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        onClose() {
            this.deleteTagsView()
            this.$router.push('/service/application/mine')
        },
        deleteTagsView() {
            let view = { ...this.$route };
            this.$store.dispatch("tagsView/delView", view).then(() => {});
        },
        onChangeType() {
            this.ruleForm.apiName = ''
            this.clearValidate()
        },
        onChangeApiService(id) {
            let obj = this.apiV1List.find(item => item.apiVersionId == id)
            if (obj) {
                this.ruleForm.apiName = obj.apiName
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.appliction-publish-dialog {
    ::v-deep {
        .el-dialog__footer {
            text-align: center;
        }
    }
}

</style>
